<template>
    <tnxel-submit-form ref="form" :model="model" :rules="rules">
        <el-form-item label="所属应用" v-if="!project.isSingleArch()">
            <ModelingAppSelect v-model="modelAppName"/>
        </el-form-item>
        <el-form-item label="包名" prop="packageName" class="new-error-line mb-0">
            <el-input v-model="model.packageName" @keydown.enter.prevent="confirm"/>
        </el-form-item>
    </tnxel-submit-form>
</template>

<script>
import tnx from '@/tnx.js';

import rules from './class-rules.js';
import ModelingAppSelect from './components/ModelingAppSelect.vue';

export default {
    components: {ModelingAppSelect},
    props: {
        appName: {
            type: String,
            required: true,
        },
        packageName: {
            type: String,
            required: true,
        },
        after: Function,
    },
    data() {
        return {
            modelAppName: this.appName,
            model: {
                packageName: this.packageName,
            },
            rules: {
                packageName: rules.packageName.concat(tnx.app.validator.requiredRule),
            },
        };
    },
    computed: {
        project() {
            return tnx.app.global.modelingProject;
        },
    },
    methods: {
        dialog() {
            return {
                title: '修改包名',
                width: 400,
                type: 'confirm',
                click: this.toSubmit,
            }
        },
        confirm(event) {
            let dialog = event.target;
            while (dialog && !dialog.classList.contains('tnxel-dialog')) {
                dialog = dialog.parentElement;
            }
            let footer = dialog.getElementsByClassName('tnxel-dialog-footer')[0];
            let primaryButton = footer.getElementsByClassName('el-button--primary')[0];
            primaryButton.click();
        },
        toSubmit(yes, close) {
            if (yes) {
                this.$refs.form.toSubmit(() => {
                    if (this.after(this.modelAppName, this.packageName, this.model.packageName) !== false) {
                        close();
                    }
                });
                return false;
            }
        },
    }
}
</script>

<style scoped>

</style>
